<template>
	<view class="container">
		<view class="form bg-fff">
			<view class="form-item">
				<view class="form-label">上传图片</view>
				<view class="form-value">
					<u-upload
						width="150rpx" 
						height="150rpx" 
						:header="{'Cookie': 'XDEBUG_TRIGGER=;'}"
						:form-data="{
							token: token,
							app_id: app_id,
						}"
						max-count="4"
						name="iFile"
						:action="$setting.baseUrl()+'/file.upload/image'" 
						@on-success="handleUploadSuccess()"
						@on-remove="handleUploadRemove()"></u-upload>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">姓名</view>
				<view class="form-value flex-align-center">
					<input type="text" maxlength="11" v-model="form.name" placeholder="请在此填写您的姓名" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">联系电话</view>
				<view class="form-value flex-align-center">
					<input type="number" maxlength="11" v-model="form.phone" placeholder="请在此填写您的联系电话" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text>*</text>意见反馈</view>
				<view class="form-value flex-align-center">
					<textarea v-model="form.content" placeholder="请在此填写您的意见反馈" />
				</view>
			</view>
		</view>
		
		<b-u-button-theme width="100%" height="90rpx" @click="send">提交反馈</b-u-button-theme>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: uni.getStorageSync('token'),
				app_id: uni.$setting.appId,
				form: {
					image: [],
				},
			}
		},
		onLoad() {
			this.getHttp();
		},
		methods: {
			send() {
				// if(uni.$u.test.isEmpty(this.form.phone)) {
				// 	uni.showToast({
				// 		title: "请填写您的联系电话",
				// 		icon: "none"
				// 	})
				// } else 
				if(uni.$u.test.isEmpty(this.form.content)) {
					uni.showToast({
						title: "请填写您的意见",
						icon: "none"
					})
				} else {
					let params = JSON.parse(JSON.stringify(this.form));
					params.image = params.image.join(',');
					uni.$u.api.postFeedBack(params).then(res => {
						uni.showModal({
							title: '提示',
							content: '感谢您的反馈',
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateBack();
									// console.log('用户点击确定');
								} else if (res.cancel) {
									// console.log('用户点击取消');
								}
							}
						});
					})
				}
			},
			handleUploadSuccess(e) {
				this.form.image.push(e.data.file_path);
			},
			handleUploadRemove(index) {
				this.form.image.splice(index, 1);
			},
			getHttp() {
				
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		
		.form {
			border-radius: 20rpx;
			margin-bottom: 60rpx;
			padding: 30rpx;
			
			.form-item + .form-item {
				margin-top: 30rpx;
			}
			
			.form-label {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				
				text {
					color: red;
				}
			}
			
			.form-value {
				margin-top: 20rpx;
				
				textarea {
					flex: 1;
					padding: 30rpx;
					border-radius: 20rpx;
					background: #f6f7f8;
				}
				
				input {
					flex: 1;
					padding: 30rpx;
					border-radius: 20rpx;
					background: #f6f7f8;
				}
			}
		}
	}
</style>
